<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>BOM</title>
	</head>
	<body>
		<div id="box"></div>
		<button id="open">打开窗口</button>
		<button id="close">关闭窗口</button>
		<a href="http://www.baidu.com" target="hehe">hehe</a>
		<a href="http://www.taobao.com" target="hehe">呵呵</a>
		<button id="resizeTo">改变大小</button>
		<button id="resizeBy">改变大小2</button>

		<button id="moveTo">移动</button>
		<button id="moveBy">移动2</button>

		<button id="scrollTo">滚动</button>
		<button id="scrollBy">滚动2</button>

		<br>
		<button id="confirm">弹框</button>
		<button id="prompt">弹框2</button>	

		<input type="text">
		<button id="reload">刷新</button>

		<iframe src="http://www.baidu.com" frameborder="0" width="600px" height="800px" scrolling="yes"></iframe>
	</body>
</html>
<script>
	// BOM
	// Browser Object Model 浏览器对象模型
	// 处理浏览器窗口与浏览器窗口之间的通讯
	// BOM中提供了很多对象, 每个对象都有自己的属性和方法
	// window对象是BOM的顶层对象(核心), 其它对象都是window的延伸对象

	/*

		document
		location
		history
		screen
		navigator
		frames

	*/

	// window的特点
	// 所有的全局变量都是window的属性
	var phone = "I like HuWei";

	console.log(window.phone);

	// 调用window的属性和方法时, window可以省略
	// var boxDiv = window.document.getElementById('box');
	var boxDiv = document.getElementById('box');
	boxDiv.style.width = "200px";
	boxDiv.style.height = "200px";
	boxDiv.style.backgroundColor = "red";

	// window.alert("111");
	// alert("111");
	var newWindow = null;
	var windowArr = [];
	var openBtn = document.getElementById('open');
	openBtn.onclick = function() {
		// 第一个参数: URL 统一资源定位符
		// 第二个参数: 配合a标签和表单标签的target使用的
		// 第三个参数: feature(特征), 比如新窗口的位置, 宽度, 高度了, 工具栏, 滚动条等等

		// window.open("http://www.baidu.com");
		// window.open("", "hehe");O
		newWindow = window.open("", "", "width=100, height=200, top=200, left=200, scrollbars=yes, toolbar=no");
		console.log(newWindow.document);
		var div = newWindow.document.createElement('div');
		div.style.width = "300px";
		div.style.height = "3000px";
		div.style.border = "2px solid black";
		div.style.backgroundColor = "red";
		console.log(newWindow);
		newWindow.document.body.appendChild(div);
		windowArr.push(newWindow);
	};

	var closeBtn = document.getElementById('close');
	closeBtn.onclick = function() {
		// 关闭窗口
		// newWindow.close();
		// console.log(newWindow);

		for (var i = 0; i < windowArr.length; i++) {
			windowArr[i].close();
		}
	};

	var resizeToBtn = document.getElementById('resizeTo');
	resizeToBtn.onclick = function() {
		// 改变宽高
		newWindow.resizeTo(600, 600);
	};


	var resizeByBtn = document.getElementById('resizeBy');
	resizeByBtn.onclick = function() {
		// 第一个参数: dw
		// 第二个参数: dh
		// 在之前的基础上增加宽高
		newWindow.resizeBy(10, 10);
	};

	// moveTo
	var moveToBtn = document.getElementById('moveTo');
	moveToBtn.onclick = function() {
		// 移动到
		newWindow.moveTo(500, 600);
	};

	// moveBy
	var moveByBtn = document.getElementById("moveBy");
	moveByBtn.onclick = function() {
		// 基于当前位置进行移动
		newWindow.moveBy(10, 10);
	};

	// scrollTo
	var scrollToBtn = document.getElementById('scrollTo');
	scrollToBtn.onclick = function() {
		// 滚动条滚动到
		newWindow.scrollTo(0, 500);
	};

	// scrollBy
	var scrollByBtn = document.getElementById('scrollBy');
	scrollByBtn.onclick = function() {
		// 基于当前的位置进行滚动
		newWindow.scrollBy(0, 10);
	};

	// 弹框
	// alert("呵呵");


	// confirm弹框
	var confirmBtn = document.getElementById('confirm');

	confirmBtn.onclick = function() {
		// 返回值是bool类型, 如果点确定返回true, 点取消返回false
		var result = confirm("马超群是男人?");
		console.log(result);
	};


	var promptBtn = document.getElementById('prompt');
	promptBtn.onclick = function() {
		// 点击取消, 返回null
		// 点击确定, 返回输入框中输入的内容
		var result = prompt("你喜欢哪个同学?", "");
		console.log(result);
	};


	// history 历史记录

	// location对象
	// 主机地址包含端口号
	console.log(location.host);

	// 主机名
	console.log(location.hostname);

	// 端口号
	console.log(location.port);

	// 文件路径
	console.log(location.pathname);

	// 协议
	console.log(location.protocol);

	// 查询参数 ? 号后面的参数
	console.log(location.search);

	// 哈希值 #后面的内容
	console.log(location.hash);

	// 刷新页面
	var reloadBtn = document.getElementById('reload');
	reloadBtn.onclick = function() {
		// 刷新
		// location.reload();

		// 跳转
		location.href = "http://www.baidu.com";
	};
	
	
	// navigator 包含浏览器有关的信息
	console.dir(navigator);

	// 浏览器编码名称
	console.log(navigator.appCodeName);

	// 浏览器名称
	console.log(navigator.appName);

	// 平台
	console.log(navigator.platform);

	// 用户代理, 一般指浏览器, 发送请求时, 请求头包含的信息
	console.log(navigator.userAgent);


	// 判断是不是用的Chrome浏览器
	if (navigator.userAgent.indexOf("Chrome") != -1) {
		// alert("用的是Chrome浏览器");
	} else if (navigator.userAgent.indexOf("Firefox") != -1) {
		// alert("用的是火狐浏览器");
	} else {
		// alert("其它浏览器");
	}



	// screen
	// 设备屏幕的高度
	console.log(screen.height);
	// 设备屏幕的高度
	console.log(screen.width);

	console.dir(screen);

	// 浏览器能够占用的高度
	console.log(screen.availHeight);

	// 浏览器能够使用的宽度
	console.log(screen.availWidth);

	// frames
	// console.dir(window.frames);
	console.log(frames.length);











</script>